<template>
	<view>
		<navbar title="商品列表"></navbar>
		<view class="hot-box flex fww">
			<view class="hot-list" v-for="(item, index) in list" :key="index" @click="goDetail(item.productId)">
				<image class="goods-img" :src="item.mainImg" mode=""></image>
				<view class="name ell2">{{item.name}}</view>
				<view class="price-box fa">
					<view class="price">¥{{item.price}}</view>
					<view class="market-price">￥{{item.marketPrice}}</view>
				</view>
			</view>
		</view>
		<view class="nodata-box" v-if="nodata">
			<image class="nodata-img" src="../../static/nodata.png" mode=""></image>
			<view class="nodata-prompt">暂无数据</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				count: 0,
				list: [],
				nodata: 1,
				name: ''
			};
		},
		onLoad(options) {
			if(options.keyword) {
				this.name = options.keyword
			}
			this.getList()
		},
		onReachBottom() {
			if(this.list.length < this.count) {
				this.page++
				this.getList()
			}
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/cate/goods_detail?id=' + id
				})
			},
			getList() {
				this.api.goodsListFunc({
					name: this.name,
					pageNum: this.page
				}).then(res => {
					if(res.code == 200) {
						this.count = res.total
						this.list = this.page == 1 ? res.rows : this.list.concat(res.rows)
						this.nodata = this.list.length > 0 ? 0 : 1
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hot-box{
		margin: 30rpx 26rpx 0;
		padding: 0 0 2rpx;
		.hot-list{
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-radius: 16rpx;
			background-color: #fff;
			&:nth-child(2n){
				margin-left: 22rpx;
			}
			.goods-img{
				width: 338rpx;
				height: 338rpx;
				border-radius: 16rpx 16rpx 0 0;
			}
			.name{
				padding: 0 8rpx;
				width: 335rpx;
				font-size: 26rpx;
				box-sizing: border-box;
			}
			.price-box{
				margin-top: 6rpx;
				padding: 0 8rpx;
				width: 220rpx;
				.price{
					font-size: 24rpx;
					color: #FE3134;
				}
				.market-price{
					margin-left: 6rpx;
					font-size: 22rpx;
					color: #777;
					line-height: 26rpx;
					text-decoration: line-through;
				}
			}
		}
	}
	.nomore{
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #999;
	}
</style>
